<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">佣金比例配置</span></strong>
            </div>
            <div class="body-content">
                <!-- 数据列表 -->
                <el-table :data="tableData" border v-loading="listLoading" element-loading-text="拼命加载中">
                    <el-table-column label="级别" width="150">
                        <template slot-scope="scope">
                            {{scope.row.level === 1 ? '一级' : '二级'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="实习会员">
                        <template slot-scope="scope">
                            {{scope.row.memberLevel0BonusRate}}%
                        </template>
                    </el-table-column>
                    <el-table-column label="普通会员">
                        <template slot-scope="scope">
                            {{scope.row.memberLevel1BonusRate}}%
                        </template>
                    </el-table-column>
                    <el-table-column label="白金会员">
                        <template slot-scope="scope">
                            {{scope.row.memberLevel2BonusRate}}%
                        </template>
                    </el-table-column>
                    <el-table-column label="钻石会员">
                        <template slot-scope="scope">
                            {{scope.row.memberLevel3BonusRate}}%
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editRate(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 编辑弹窗 -->
                <el-dialog title="编辑" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogFormVisible" width="30%" @close="">
                    <el-form>
                        <el-form-item label="实习会员" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.memberLevel0BonusRate" style="width:70px;"/>%
                        </el-form-item>
                        <el-form-item label="普通会员" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.memberLevel1BonusRate" style="width:70px;"/>%
                        </el-form-item>
                        <el-form-item label="白金会员" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.memberLevel2BonusRate" style="width:70px;"/>%
                        </el-form-item>
                        <el-form-item label="钻石会员" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.memberLevel3BonusRate" style="width:70px;"/>%
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="updateBonusRate">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>

<script>
import { bonusRateConfigList, updateBonusRateConfig } from "../../api/api";
export default {
    data() {
        return {
            closeOnClickModal: false,
            dialogFormVisible: false,
            formLabelWidth: "180px",

            listLoading: false,
            // 编辑数据
            dailogFrom: {
                memberLevel1BonusRate: "",
                memberLevel2BonusRate: "",
                memberLevel3BonusRate: ""
            },
            tableData: [] // 数据列表
        };
    },
    methods: {
        // 编辑
        editRate(rowData) {
            // this.dailogFrom = JSON.parse(JSON.stringify(rowData));
            for (const key in rowData) {
                this.dailogFrom[key] = rowData[key].toString();
            }
            this.dialogFormVisible = true;
        },
        // 获取佣金比例配置列表
        getbBonusRateConfigList() {
            this.listLoading = true;
            bonusRateConfigList().then(res => {
                this.listLoading = false;

                this.tableData = res.data;
            });
        },
        // 更新佣金比例配置
        updateBonusRate() {
            if (
                !/^[0-9]+$/.test(this.dailogFrom.memberLevel1BonusRate) ||
                !this.dailogFrom.memberLevel1BonusRate
            ) {
                this.$message.error("普通会员请输入正整数!");
                return false;
            }
            if (
                !/^[0-9]+$/.test(this.dailogFrom.memberLevel2BonusRate) ||
                !this.dailogFrom.memberLevel2BonusRate
            ) {
                this.$message.error("白金会员请输入正整数!");
                return false;
            }
            if (
                !/^[0-9]+$/.test(this.dailogFrom.memberLevel2BonusRate) ||
                !this.dailogFrom.memberLevel3BonusRate
            ) {
                this.$message.error("钻石会员请输入正整数!");
                return false;
            }
            if (
                this.dailogFrom.memberLevel1BonusRate > 100 ||
                this.dailogFrom.memberLevel2BonusRate > 100 ||
                this.dailogFrom.memberLevel3BonusRate > 100
            ) {
                this.$message.error("最大值为100!");
                return false;
            }
            updateBonusRateConfig({
                autoId: this.dailogFrom.autoId,
                memberLevel0BonusRate: this.dailogFrom.memberLevel0BonusRate,
                memberLevel1BonusRate: this.dailogFrom.memberLevel1BonusRate,
                memberLevel2BonusRate: this.dailogFrom.memberLevel2BonusRate,
                memberLevel3BonusRate: this.dailogFrom.memberLevel3BonusRate
            }).then(res => {
                this.listLoading = false;
                this.$message.success(res.message);
                this.getbBonusRateConfigList();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 获取佣金比例配置列表
        this.getbBonusRateConfigList();
    }
};
</script>

<style>
</style>
